<template>
    <div class="partBgBox p-14 w-100 flexBetween">
        <div>
            <span class="mr-10">起止时间</span>
            <a-range-picker size="small" v-model="dateRange" style="width:200px;"/>
            <span class="ml-18 mr-10">所属大队</span>
            <a-select default-value="lucy" style="width: 120px" size="small" v-model="brigade"
                      @change="brigadeChange()">
                <a-select-option v-for="(item,i) in brigadeList" :key="i" :value="item.value">
                    {{item.label}}
                </a-select-option>
            </a-select>

            <span class="ml-18 mr-10">所属中队</span>
            <a-select default-value="lucy" style="width: 160px" size="small" v-model="squadron"  :allowClear="true">
                <a-select-option v-for="(item,i) in squadronList" :key="i" :value="item.value">
                    {{item.label}}
                </a-select-option>
            </a-select>
            <span class="ml-18 mr-10">所属高速</span>
            <a-select default-value="lucy" style="width: 160px" size="small" v-model="expressway" :allowClear="true">
                <a-select-option v-for="(item,i) in expresswayList" :key="i" :value="item.value">
                    {{item.label}}
                </a-select-option>
            </a-select>
        </div>

        <div>
            <a-button type="primary" size="small" class="mr-14" @click="doSearchForm">
                查询
            </a-button>
            <a-button type="primary" size="small" class="mr-14" @click="resetForm">
                重置
            </a-button>
            <a-button type="primary" size="small" @click="exportExcel">
                导出
            </a-button>
        </div>
    </div>
</template>

<script>
    import {sysDictList} from "../mock-data/public";
    import {getbrigadeList, getexpresswayList, getsquadronList} from "../common/api";
    import {getNextWeekRange} from "../utils/js-utils";

    export default {
        name: "deployment-search",
        data() {
            return {
                dateRange: [],

                brigadeList: [],
                squadronList: [],
                expresswayList: [],

                brigade: "",
                squadron: "",
                expressway: "",
            }
        },
        computed: {
            user() {
                return this.$store.state.user
            },
        },
        methods: {
            // onRangeChange() {
            //     console.log(this.dateRange[0].format("YYYY-MM-DD"))
            // },
            getbrigadeList() {  //大队
                getbrigadeList().then(res => {
                    if (res.isSuccess) {
                        this.brigadeList = res.data.map((v) => {
                            return {label: v.cdepartmentname, value: v.cdepartmentid}
                        });
                        this.brigade = this.brigadeList[0].value;
                        this.brigadeChange();
                        this.doSearchForm();
                    }
                });
            },
            brigadeChange() { //大队变更
                this.getsquadronList();
                this.getexpresswayList();
            },

            getsquadronList() {  //中队
                console.log(this.brigade);
                getsquadronList({deptId: this.brigade}).then(res => {
                    if (res.isSuccess) {
                        this.squadronList = res.data.map((v) => {
                            return {label: v.deptshortname, value: v.cdepartmentid}
                        });
                        this.$emit('getSquadrons', this.squadronList)
                    }
                });
            },
            getexpresswayList() {  //高速
                getexpresswayList({deptId: this.brigade, nlevel:3}).then(res => {
                    if (res.isSuccess) {
                        this.expresswayList = res.data.map((v) => {
                            return {label: v.name, value: v.id}
                        });
                    }
                })
            },
            doSearchForm() {

                var reqBox = {
                    deptId: this.brigade,
                    middeptId: this.squadron,
                    motorwayId: this.expressway,
                    nlevel: 3,
                    // todo
                    startTime: this.dateRange[0].format("YYYY-MM-DD")+" 00:00:00",
                    endTime: this.dateRange[1].format("YYYY-MM-DD")+" 00:00:00",
                };
                this.$emit('noSearchForm', reqBox)
            },
            exportExcel(){
                const selectedData = this.brigadeList.find((v)=>{
                    return v.value == this.brigade;
                });
                console.log(selectedData?selectedData.label:"");
                this.$emit('exportExcel',selectedData?selectedData.label:"")
            },
            resetForm() {
                this.dateRange = getNextWeekRange();
                // this.brigade = this.user.departmentid;

                this.squadron = "";
                this.expressway = "";
                // this.getsquadronList();
                // this.getexpresswayList();
            }
        },
        beforeMount() {
            this.getbrigadeList();
            // this.getsquadronList();
            // this.getexpresswayList();

        }, mounted() {
            this.dateRange = getNextWeekRange()
        }
    }
</script>

<style scoped>
    :host {
        display: block
    }

</style>
